<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Willy Wonkas - Personal Portfolio Website Template"/>
    <meta name="keywords"
          content="blog, business card, creative, creative portfolio, cv theme, online resume, personal, portfolio, professional cv, responsive portfolio, resume, resume theme, vcard"/>
    <meta name="author" content="willy wonka"/>
    <title>Willy Wonkas - Personal Portfolio Website Template</title>
    <!--favicon-img-->
    <link rel="icon" type="image/png" href="header/images/favicon.png">
    <!--favicon-img-->
    <!--main css file should not be removed -->
    <link rel="stylesheet" href="header/css/index.css">
    <!--main css file-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>

    <script type="text/javascript" src="header/js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="header/js/jquery-func.js"></script>

    <link rel="stylesheet" href="header/css/style.css" type="text/css" media="all"/>
    <!--[if IE 6]>
    <link rel="stylesheet" href="header/css/ie6.css" type="text/css" media="all"/>
    <![endif]-->
</head>
<body>
<!--contains all the div-->
<div id="all">
    <!--mouse  follower-->
    <div class="cursor"></div>
    <!--mouse  follower-->
    <!--loader-->
    <div id="loader">
        <span class="color">中国</span>共产党
    </div>
    <!--loader-end-->
    <!--link-screen-->
    <div id="breaker">
    </div>
    <div id="breaker-two">
    </div>
    <!--link-screen-->
    <!--Main-Section-->
    <!--Navigator-fullscreen-->
    <div id="navigation-content" style=" background-color: #e1a17e;">
        <div class="logo">
            <img src="header/images/willy wonka logo.png" alt="logo">
        </div>
        <div class="navigation-close">
            <span class="close-first"></span>
            <span class="close-second"></span>
        </div>
        <div class="navigation-links">
            <a href="#" data-text="首页" id="home-link">首页</a>
            <a href="#" data-text="文献" id="portfolio-link">文献数据库</a>
            <a href="#" data-text="影视剧" id="contact-link">影视剧作品展示</a>
            <a href="#" data-text="建党精神" id="blog-link">伟大的建党精神</a>
            <a href="#" data-text="关于我们" id="about-link">关于我们</a>
        </div>
    </div>
    <!--Navigator-Fullscreen END-->
    <!--Home Page-->
    <!--Menubar-->
    <div id="navigation-bar">
        <img src="header/images/willy wonka logo.png" alt="logo">
        <div class="menubar">
            <span class="first-span"></span>
            <span class="second-span"></span>
            <span class="third-span"></span>
        </div>
    </div>
    <!--Menubar End-->
    <!--Header-->
    <div id="header">
        <div id="particles"></div>
        <!--Social Media Links-->
        <div class="social-media-links">
            <a href="#"><img src="header/images/instagram logo.png" class="social-media" alt="instagram-logo"></a>
            <!--Your instagram homepage link inser in place of "#"-->
            <a href="#"><img src="header/images/facebook logo.png" class="social-media" alt="facebook-logo"></a>
            <a href="#"><img src="header/images/linkedin logo.png" class="social-media" alt="linkedin-logo"></a>
            <a href="#"><img src="header/images/twitter logo.png" class="social-media" alt="twitter-logo"></a>

        </div>
        <!--Social Media Links end-->
        <div class="header-content">
            <div class="header-content-box">
                <div class="firstline"><span class="color" style="color: white">精神 </span><span
                        style="color: red">谱系</span></div>
                <div class="secondline">
                    中国
                    <span class="txt-rotate color" data-period="1200"
                          data-rotate='[ " 共产党人", " 共产党人", " 共产党人" ]'></span>
                    <span class="slash">|</span>
                </div>
                <div class="contact">
                    <a href="Mailto:#"><img src="header/images/mail.png" alt="email-pic" class="contactpic"></a>
                    <!--Your email Id write in place of "#"-->
                    <a href="Tel:#"><img src="header/images/call.png" alt="phone-pic" class="contactpic"></a>
                    <!--Your telephone number Id write in place of "#"-->
                </div>
            </div>
        </div>
        <!--header image-->
        <div>
            <img src="http://dangshi.people.com.cn/img/MAIN/2022/01/121287/images/fmbg.jpg" alt="logo">
        </div>
        <!--header image end-->
    </div>
    <!--Header End-->
    <!--HomePage End-->
    <!--Main-Section End-->
    <!--about-->
    <div id="about">
        <div class="color-changer">
            <div class="color-panel">
                <img src="header/images/gear.png" alt="">
            </div>
            <div class="color-selector">
                <div class="heading">Custom Colors</div>
                <div class="colors">
                    <ul>
                        <li>
                            <a href="#0" class="color-red " title="color-red"></a>
                        </li>
                        <li>
                            <a href="#0" class="color-purple" title="color-purple"></a>
                        </li>
                        <li>
                            <a href="#0" class="color-malt" title="color-malt"></a>
                        </li>
                        <li>
                            <a href="#0" class="color-green" title="color-green"></a>
                        </li>
                        <li>
                            <a href="#0" class="color-blue" title="color-blue"></a>
                        </li>
                        <li>
                            <a href="#0" class="color-orange" title="color-orange"></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--about content-->
        <div id="about-content">
            <div class="about-header">
                关于 <span class="color">我们</span>
                <span class="header-caption">从这里开始了解更多关于我们 <span class="color"> me.</span></span>
            </div>
            <div class="about-main">
                <div class="about-first-paragraph wow">
                    <!--about description-->
                    <span class="about-first-line">
                    I'm creative
                    <span class="color">web developer</span>
                     based in New York , USA </span>
                    <br>
                    <span class="about-second-line"> With 20 years of experience as a professional Web developer, I have acquired the skills and knowledge necessary to make your project a success. I enjoy every step while working.</span>
                    <div class="cv">
                        <a href="cv.txt" download="Arlo Brown - CV">
                            <button>Download <span class="colors">CV</span></button>
                        </a>
                    </div>
                </div>
                <!--about picture-->
                <div class="about-img">
                    <img src="https://pic.vjshi.com/2021-07-22/8527a5cc52ccf4c01ea2b74b15ba8064/00003.jpg?x-oss-process=style/watermark"
                         alt="Your Image">
                </div>
            </div>

        </div>
<!--        &lt;!&ndash;services start&ndash;&gt;-->
<!--        <div id="services">-->
<!--            <div class="color-changer">-->
<!--                <div class="color-panel">-->
<!--                    <img src="header/images/gear.png" alt="">-->
<!--                </div>-->
<!--                <div class="color-selector">-->
<!--                    <div class="heading">Custom Colors</div>-->
<!--                    <div class="colors">-->
<!--                        <ul>-->
<!--                            <li>-->
<!--                                <a href="#0" class="color-red " title="color-red"></a>-->
<!--                            </li>-->
<!--                            <li>-->
<!--                                <a href="#0" class="color-purple" title="color-purple"></a>-->
<!--                            </li>-->
<!--                            <li>-->
<!--                                <a href="#0" class="color-malt" title="color-malt"></a>-->
<!--                            </li>-->
<!--                            <li>-->
<!--                                <a href="#0" class="color-green" title="color-green"></a>-->
<!--                            </li>-->
<!--                            <li>-->
<!--                                <a href="#0" class="color-blue" title="color-blue"></a>-->
<!--                            </li>-->
<!--                            <li>-->
<!--                                <a href="#0" class="color-orange" title="color-orange"></a>-->
<!--                            </li>-->
<!--                        </ul>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--            &lt;!&ndash;services header&ndash;&gt;-->
<!--            <div class="services-heading wow">-->
<!--                <span class="color">My</span> Services-->
<!--            </div>-->
<!--            &lt;!&ndash;services header end&ndash;&gt;-->
<!--            &lt;!&ndash;services content&ndash;&gt;-->
<!--            <div class="services-content">-->
<!--                <div class="service-one service wow">-->
<!--                    <div class="service-img">-->
<!--                        <img src="header/images/coding.png" alt="service-one">-->
<!--                    </div>-->
<!--                    <div class="service-description">-->
<!--                        <h2>Web Designing</h2>-->
<!--                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod quibusdam possimus</p>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="service-two service wow">-->
<!--                    <div class="service-img">-->
<!--                        <img src="header/images/instagram.png" alt="service-two">-->
<!--                    </div>-->
<!--                    <div class="service-description">-->
<!--                        <h2>Social Media</h2>-->
<!--                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod quibusdam possimus</p>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="service-three service wow">-->
<!--                    <div class="service-img">-->
<!--                        <img src="header/images/bulb.png" alt="service-three">-->
<!--                    </div>-->
<!--                    <div class="service-description">-->
<!--                        <h2>Creative Design</h2>-->
<!--                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod quibusdam possimus</p>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
        <!--services content end-->
        <!--services end-->
<!--        <div id="skills">-->
<!--            <div class="skills-header">-->
<!--                My <span class="color"> Skills</span>-->
<!--            </div>-->
<!--            <div class="skills-content " style="text-align: center;">-->
<!--                <div class="skill-html skill">-->
<!--                    <div class="skill-text">-->
<!--                        <div class="html">-->
<!--                            HTML/CSS-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="html-prog wow prog">-->
<!--                        <div class="html-progress wow">95%</div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="skill-html skill">-->
<!--                    <div class="skill-text">-->
<!--                        <div class="html">-->
<!--                            Javascript-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="html-prog wow prog">-->
<!--                        <div class="js-progress wow">90%</div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="skill-html skill">-->
<!--                    <div class="skill-text">-->
<!--                        <div class="html">-->
<!--                            Adobe Ps-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="html-prog wow prog">-->
<!--                        <div class="adobe-progress wow">83%</div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="skill-html skill">-->
<!--                    <div class="skill-text">-->
<!--                        <div class="html">-->
<!--                            PHP-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="html-prog wow prog">-->
<!--                        <div class="php-progress wow">87%</div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="skill-html skill">-->
<!--                    <div class="skill-text">-->
<!--                        <div class="html">-->
<!--                            JQuery-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="html-prog wow prog">-->
<!--                        <div class="jquery-progress wow">94%</div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="skill-html skill">-->
<!--                    <div class="skill-text">-->
<!--                        <div class="html">-->
<!--                            SEO-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="html-prog wow prog">-->
<!--                        <div class="seo-progress wow">84%</div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
        <!--copyright-section You Can Remove After Downloading-->
        <div class="footer">
            <div class="footer-text">
                <img src="./header/images/copyright.png" alt="copyright-img" class="images" height="14px"> Willy Wonkas
            </div>
        </div>
        <!--copyright-section-->
    </div>
    <!--about end-->
    <!--portfolio-->
    <div id="portfolio">
        <div class="color-changer">
            <div class="color-panel">
                <img src="header/images/gear.png" alt="">
            </div>
            <div class="color-selector">
                <div class="heading">Custom Colors</div>
                <div class="colors">
                    <ul>
                        <li>
                            <a href="#0" class="color-red " title="color-red"></a>
                        </li>
                        <li>
                            <a href="#0" class="color-purple" title="color-purple"></a>
                        </li>
                        <li>
                            <a href="#0" class="color-malt" title="color-malt"></a>
                        </li>
                        <li>
                            <a href="#0" class="color-green" title="color-green"></a>
                        </li>
                        <li>
                            <a href="#0" class="color-blue" title="color-blue"></a>
                        </li>
                        <li>
                            <a href="#0" class="color-orange" title="color-orange"></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>


        <!-- ======================================文献============================================= -->

        <div class="portfolio-header"><span class="color"> 文献 </span> 数据库
            <span class="header-caption"> 中国 <span class="color"> 共产党</span></span>
        </div>
        <div style="height: 100%;width: 100%;background-color: #000000">

            <!-- 搜索框 -->
            <div id="wai" style="display: flex;
            justify-content: center;">
                <div class="search"
                     style="min-width: 500px; max-width: 800px;border: 2px solid white;display: flex;border-radius: 19px 19px 19px 19px">
                    <select style="display: inline;width: 72px; border-radius: 15px 0 0 15px ;border: none;outline: none"
                            name="country">
                        <option style="display: inline" value="China" selected>主题</option>
                        <option style="display: inline" value="USA">作者</option>
                        <option style="display: inline" value="JAP">关键字</option>
                        <option style="display: inline" value="IND">印度</option>
                    </select>
                    <input style="border: none;outline: none" placeholder="请输入..." name="keyword" type="text">
                    <div style="width:72px" id="loadPapersBtn">
                        <button style="width:72px;border: none;outline: none" type="submit"></button>
                    </div>
                </div>
            </div>


            <!-- 列表-->
            <div style="display: flex;justify-content: center;margin-top: 40px">
                <div style="min-width: 1000px; max-width: 1200px">
                    <table id="papersTable">
                        <thead id="theadOfliteratureSearch"
                               style="color: #b7babc;background-color: #1e1e1e;display: none ">
                        <tr>
                            <th>题名</th>
                            <th>作者</th>
                            <th>来源</th>
                            <th style="width: 25.57%">发表时间</th>
                        </tr>
                        </thead>

                        <tbody class="custom-scrollable">
                        <!-- 数据将通过 AJAX 动态填充 -->
                        </tbody>
                    </table>


                    <!-- 分页按钮 -->
                    <div id="pageOfSeach" class="pagination"
                         style="text-align: center;font-size: 10px ;margin-top: 15px;display: none">
                        <button style="padding: 10px 16px;" id="prevPage">上一页</button>
                        <span id="pageInfo"
                              style="font-size: 18px;;margin-left: 16px;margin-right: 16px">第 1 页，共 4 页</span>
                        <button style="padding: 10px 16px;" id="nextPage">下一页</button>
                    </div>


                </div>
            </div>

        </div>


        <!--        <div id="portfolio-content">-->
        <!--            <div class="portfolio portfolio-first">-->
        <!--                <div class="portfolio-image">-->
        <!--                    <img src="https://p1.ssl.qhimg.com/t01d6cc667abaea1238.jpg" alt="portfolio-first">-->
        <!--                </div>-->
        <!--                <div class="portfolio-text">-->
        <!--                    <h2>App Idea</h2>-->
        <!--                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad ut optio repellat cupiditate-->
        <!--                        expedita eius dignissimos. Id cumque placeat minima ad laudantium suscipit voluptatem-->
        <!--                        ducimus</p>-->
        <!--                    <div class="button"><a href="#">-->
        <!--                        <button><span class="index"> View Project<i class="gg-arrow-right"></i></span></button>-->
        <!--                    </a></div>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--            <div class="portfolio portfolio-second">-->
        <!--                <div class="portfolio-image">-->
        <!--                    <img src="https://p1.ssl.qhimg.com/t01d6cc667abaea1238.jpg" alt="portfolio-second">-->
        <!--                </div>-->
        <!--                <div class="portfolio-text">-->
        <!--                    <h2>Web Designing</h2>-->
        <!--                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id cumque placeat minima ad laudantium-->
        <!--                        suscipit-->
        <!--                        voluptatem ducimus. Id cumque placeat minima ad laudantium suscipit voluptatem ducimus</p>-->
        <!--                    <div class="button"><a href="#">-->
        <!--                        <button><span class="index"> View Project<i class="gg-arrow-right"></i></span></button>-->
        <!--                    </a></div>-->
        <!--                </div>-->
        <!--            </div>-->

        <!--            <div class="portfolio portfolio-third">-->
        <!--                <div class="portfolio-image">-->
        <!--                    <img src="https://p1.ssl.qhimg.com/t01d6cc667abaea1238.jpg" alt="portfolio-third">-->
        <!--                </div>-->
        <!--                <div class="portfolio-text">-->
        <!--                    <h2>UI Designing</h2>-->
        <!--                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad ut optio repellat cupiditate-->
        <!--                        expedita eius dignissimos-->
        <!--                        .. Id cumque placeat minima ad laudantium suscipit voluptatem ducimus</p>-->
        <!--                    <div class="button"><a href="#">-->
        <!--                        <button><span class="index"> View Project<i class="gg-arrow-right"></i></span></button>-->
        <!--                    </a></div>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--            <div class="portfolio portfolio-fourth">-->
        <!--                <div class=" portfolio-image">-->
        <!--                    <img src="https://p1.ssl.qhimg.com/t01d6cc667abaea1238.jpg" alt="portfolio-fourth">-->
        <!--                </div>-->
        <!--                <div class="portfolio-text">-->
        <!--                    <h2>Wow Graphics</h2>-->
        <!--                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad ut optio repellat cupiditate-->
        <!--                        expedita eius dignissimos. Id cumque placeat minima ad laudantium suscipit voluptatem-->
        <!--                        ducimus</p>-->
        <!--                    <div class="button"><a href="#">-->
        <!--                        <button><span class="index"> View Project<i class="gg-arrow-right"></i></span></button>-->
        <!--                    </a></div>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--        </div>-->


        <!-- ======================================文献============================================= -->


        <!--copyright-section You Can Remove After Downloading-->
        <div class="footer">
            <div class="footer-text">
                <img src="./header/images/copyright.png" alt="copyright-img" class="images" height="14px"> Willy Wonkas
            </div>
        </div>
        <!--copyright-section-->
    </div>
    <!--portfolio end-->
    <!--blog-->
    <div id="blog">
        <div class="color-changer">
            <div class="color-panel">
                <img src="header/images/gear.png" alt="">
            </div>
            <div class="color-selector">
                <div class="heading">Custom Colors</div>
                <div class="colors">
                    <ul>
                        <li>
                            <a href="#0" class="color-red " title="color-red"></a>
                        </li>
                        <li>
                            <a href="#0" class="color-purple" title="color-purple"></a>
                        </li>
                        <li>
                            <a href="#0" class="color-malt" title="color-malt"></a>
                        </li>
                        <li>
                            <a href="#0" class="color-green" title="color-green"></a>
                        </li>
                        <li>
                            <a href="#0" class="color-blue" title="color-blue"></a>
                        </li>
                        <li>
                            <a href="#0" class="color-orange" title="color-orange"></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div style="height: 50px"></div>
        <div class="blog-header">
            <span>- 伟大的建党精神 -</span>
            <span class="header-caption">精神之 <span class="color"> 源</span></span>
        </div>
        <div style="width: 100%;position: absolute;margin-top: -100px">
            <div style="border: 2px solid white;height: 500px;margin: 130px;position: relative;margin-top: 120px">
                <div class="custom-scrollable"
                     style="padding: 30px;font-size: 30px;height:490px;overflow-y:scroll!important;">
                    <p style="text-indent: 2em;line-height: 70px;">
                        一百年前，中国共产党的先驱们创建了中国共产党，形成了坚持真理、坚守理想，践行初心、担当使命，不怕牺牲、英勇斗争，对党忠诚、不负人民的伟大建党精神，这是中国共产党的精神之源。</p>
                    <p style="text-indent: 2em;line-height: 70px;">
                        一百年来，中国共产党弘扬伟大建党精神，在长期奋斗中构建起中国共产党人的精神谱系，锤炼出鲜明的政治品格。历史川流不息，精神代代相传。我们要继续弘扬光荣传统、赓续红色血脉，永远把伟大建党精神继承下去、发扬光大！</p>
                </div>
            </div>
        </div>


        <div style="height: 600px"></div>

        <div class="blog-header">
            <span>- 党的四个时期 -</span>
            <span class="header-caption">中国 <span class="color"> 共产党</span></span>
        </div>
        <div id="overlay">
            <div class="popup">
                <div style="position: relative;">
                    <p class="popup_title"
                       style="color: red;text-align: center; position: relative;top: 11px; font-size: 22px">
                        新民主主义革命时期</p>
                    <div class="special-link"
                         style="position: absolute;left: 1645px;top: 10px;color: black;font-size:35px"
                         onclick="hidePopup()"> ✖
                    </div>
                </div>

                <!--                <p class="popup_content" style="color: red">详细内容章节</p>-->
                <div style="height: 50%">
                    <div class="popup_btn">
                        <!-- 小章节 -->
                        <div>
                            <div class="go" onclick="go(1)">井冈山精神</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(2)">苏区精神</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(3)">延安精神</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(4)">长征精神</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(4)">但别删精神</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(2)">执意会见精神</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(23)">创始人我地址撒</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(23)">展示啊哇打到我</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(23)">外啊官方</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(23)">我打发我</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(23)">啊发哇洒下阿萨v</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(1)">井冈山精神</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(23)">苏区精神</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(23)">长征精神</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(23)">执意会见精神</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(23)">创始人我地址撒</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(23)">外啊官方</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(23)">我打发我</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(23)">啊发哇洒下阿萨v</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(23)">展示啊哇打到我</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(23)">外啊官方</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(23)">我打发我</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(23)">啊发哇洒下阿萨v</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(1)">井冈山精神</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(23)">苏区精神</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(23)">长征精神</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(23)">执意会见精神</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(23)">创始人我地址撒</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(23)">外啊官方</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(23)">打我和法律地位的</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(23)">苏区精神</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(23)">长征精神</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(23)">长征精神</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(23)">执意会见精神</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(23)">创始人我地址撒</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(23)">外啊官方</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(23)">打我和法律地位的</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(23)">苏区精神</div>
                        </div>
                        <div>
                            <div class="go" onclick="go(23)">长征精神</div>
                        </div>
                    </div>
                </div>


                <!-- 推荐影视剧 -->
                <div style="display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 100%;
                            height: 290px;
                            background-color: white;" onclick="goToMovies(23)">
                    <div class="custom-scrollable"
                         style="border: 0.4px solid gray;;margin-bottom: 10px; width: 80%;background-color: white;height: 280px;display: flex;padding-right: 30px;padding-left: 30px;overflow-x:scroll!important; ">
                        <!-- 使用 th:each 循环遍历图片列表和文字列表 -->
                        <div th:each="imagePath, stat : ${imageList}" class="image-container">
                            <img th:src="@{${imagePath}}" class="movies" alt="Image"
                                 style="width: 150px; height: 190px; margin: 20px; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);">
                            <!-- 使用 th:text 绑定对应的文字内容 -->
                            <div class="moviesName" style="color: black"
                                 th:text="${'电影：'+textList[stat.index]}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="blog-content" style="position: relative">
            <div class="blogs" style="width: 700px" id="showPopup" onclick="showPopup()">
                <a href="#">
                    <div class="img">
                        <img src="https://gss0.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/730e0cf3d7ca7bcbbbd07643b3096b63f624a837.jpg"
                             alt="blog-one">
                        <div class="blog-date">2001年2月-2002年3月</div>
                    </div>
                    <div class="blog-text">
                        <h3>新民主主义革命时期</h3>
                        <p>新民主主义革命时期是中国历史上一段关键阶段，从 1919 年五四运动起至 1949 年新中国成立结束，可分四个阶段，
                            新民主主义革命的胜利，彻底结束了旧中国半殖民地半封建社会的历史，实现了民族独立和人民解放，为实现中华民族伟大复兴创造了根本社会条件。
                        </p>
                    </div>
                </a>
            </div>
            <div class="blogs" style="width: 700px">
                <a href="#">
                    <div class="img">
                        <img src="https://th.bing.com/th/id/R.eb609414957d6fa27e3f2805009eb509?rik=UnhhmqYPVKq6Pg&riu=http%3a%2f%2fi2.hdslb.com%2fbfs%2farchive%2ffbf3a3956493f8571a0bb907cdb2223a891e0238.jpg&ehk=fanWPFxJLh6pjuRVkMzSVOnm%2f%2fRL9SFaOCBgjqkbXYk%3d&risl=&pid=ImgRaw&r=0"
                             alt="blog-two">
                        <div class="blog-date">2001年2月-2002年3月</div>
                    </div>
                    <div class="blog-text">
                        <h3>社会主义革命和建设时期</h3>
                        <p>新民主主义革命时期是中国历史上一段关键阶段，从 1919 年五四运动起至 1949 年新中国成立结束，可分四个阶段，
                            新民主主义革命的胜利，彻底结束了旧中国半殖民地半封建社会的历史，实现了民族独立和人民解放，为实现中华民族伟大复兴创造了根本社会条件。
                        </p>
                    </div>
                </a>
            </div>
            <div class="blogs" style="width: 700px">
                <a href="#">
                    <div class="img">
                        <img src="https://th.bing.com/th/id/R.5bbf253b798369860fd261a53128b6b1?rik=J7quBfdhguqbVA&riu=http%3a%2f%2fphoto.81.cn%2ftsjs%2fattachement%2fjpg%2fsite3%2f20180118%2f16131d86d1479227239997.jpg&ehk=lBumGiRIDkLjf0%2bqmeeNWnOFL0X4OmWAmc2MxZ%2f1cic%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1"
                             alt="blog-three">
                        <div class="blog-date">2001年2月-2002年3月</div>
                    </div>
                    <div class="blog-text">
                        <h3>改革开放和社会主义现代化</h3>
                        <p>新民主主义革命时期是中国历史上一段关键阶段，从 1919 年五四运动起至 1949 年新中国成立结束，可分四个阶段，
                            新民主主义革命的胜利，彻底结束了旧中国半殖民地半封建社会的历史，实现了民族独立和人民解放，为实现中华民族伟大复兴创造了根本社会条件。
                        </p>
                    </div>
                </a>
            </div>
            <div class="blogs" style="width: 700px">
                <a href="#">
                    <div class="img">
                        <img src="https://th.bing.com/th/id/R.64a535b6810fac68ca4543472a536e62?rik=tRdYCDo98gkXvA&riu=http%3a%2f%2fpreview.21cnjy.com%2ffiles%2f64%2fa5%2f64a535b6810fac68ca4543472a536e62.png&ehk=4ieWIPUn6PB%2bAP9UuF8d%2bimG9Qpyi2jjvfI5O4A4Cqs%3d&risl=&pid=ImgRaw&r=0"
                             alt="blog-four">
                        <div class="blog-date">2001年2月-2002年3月</div>
                    </div>
                    <div class="blog-text">
                        <h3>中国特色社会主义</h3>
                        <p>新民主主义革命时期是中国历史上一段关键阶段，从 1919 年五四运动起至 1949 年新中国成立结束，可分四个阶段，
                            新民主主义革命的胜利，彻底结束了旧中国半殖民地半封建社会的历史，实现了民族独立和人民解放，为实现中华民族伟大复兴创造了根本社会条件。
                        </p>
                    </div>
                </a>
            </div>
        </div>
        <!--copyright-section You Can Remove After Downloading-->
        <div class="footer">
            <div class="footer-text">
                <img src="./header/images/copyright.png" alt="copyright-img" class="images" height="14px"> Willy Wonkas
            </div>
        </div>
        <!--copyright-section-->
    </div>
    <!--blog end-->
    <!--contact-->
    <div id="contact">
        <div class="color-changer">
            <div class="color-panel">
                <img src="header/images/gear.png" alt="">
            </div>
            <div class="color-selector">
                <div class="heading">Custom Colors</div>
                <div class="colors">
                    <ul>
                        <li>
                            <a href="#0" class="color-red " title="color-red"></a>
                        </li>
                        <li>
                            <a href="#0" class="color-purple" title="color-purple"></a>
                        </li>
                        <li>
                            <a href="#0" class="color-malt" title="color-malt"></a>
                        </li>
                        <li>
                            <a href="#0" class="color-green" title="color-green"></a>
                        </li>
                        <li>
                            <a href="#0" class="color-blue" title="color-blue"></a>
                        </li>
                        <li>
                            <a href="#0" class="color-orange" title="color-orange"></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>


        <!-- 影视剧展示 -->
        <div class="contact-header">影视剧 <span class="color"> 作品</span>
            <div class="contact-header-caption"><span class="color"> 中国</span> 共产党</div>
        </div>
        <div style="display: flex;justify-content: center">
            <div style="display: flex;width: 1600px ; background-color: #131313; padding: 0 40px 40px;
            flex-wrap: wrap;">
                <div th:each="imagePath, stat : ${imageList}" class="image-container">
                    <div onclick="goToMovies(23)">
                        <img th:src="@{${imagePath}}" class="movies" alt="Image"
                             style="display: block; width: 150px; height: 190px; margin: 20px; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);">
                        <!-- 使用 th:text 绑定对应的文字内容 -->
                        <div class="moviesName" style="color: white"
                             th:text="${'电影：'+textList[stat.index]}">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--        <div class="contact-header">Contact <span class="color"> Me</span>-->
        <!--            <div class="contact-header-caption"><span class="color"> Get</span> In Touch.</div>-->
        <!--        </div>-->
        <!--        <div class="contact-content">-->
        <!--            &lt;!&ndash;Contact form&ndash;&gt;-->
        <!--            <div class="contact-form">-->
        <!--                <div class="form-header">-->
        <!--                    Message Me-->
        <!--                </div>-->
        <!--                <form id="myForm" action="sendEmail.php">-->
        <!--                    <div class="input-line">-->
        <!--                        <input id="name" type="text" placeholder="Name" class="input-name">-->
        <!--                        <input id="email" type="email" placeholder="Email" class="input-name">-->
        <!--                    </div>-->
        <!--                    <input type="text" id="subject" placeholder="subject" class="input-subject">-->
        <!--                    <textarea id="body" class="input-textarea" placeholder="message"></textarea>-->
        <!--                    <button type="button" id="submit" onclick="sendEmail()" value="send">Submit</button>-->
        <!--                </form>-->

        <!--            </div>-->
        <!--            &lt;!&ndash;Contact form&ndash;&gt;-->
        <!--            &lt;!&ndash;Contact information&ndash;&gt;-->
        <!--            <div class="contact-info">-->
        <!--                <div class="contact-info-header">-->
        <!--                    Contact Info-->
        <!--                </div>-->
        <!--                <div class="contact-info-content">-->
        <!--                    <div class="contect-info-content-line">-->
        <!--                        <img src="./header/images/icon-name.png" class="icon" alt="name-icon">-->
        <!--                        <div class="contact-info-icon-text">-->
        <!--                            <h6>Name</h6>-->
        <!--                            <p>Arlo Brown</p>-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                    <div class="contect-info-content-line">-->
        <!--                        <img src="./header/images/icon-location.png" class="icon" alt="location-icon">-->
        <!--                        <div class="contact-info-icon-text">-->
        <!--                            <h6>Location</h6>-->
        <!--                            <p>New York, USA</p>-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                    <div class="contect-info-content-line">-->
        <!--                        <img src="./header/images/icon-phone.png" class="icon" alt="phone-icon">-->
        <!--                        <div class="contact-info-icon-text">-->
        <!--                            <h6>Call</h6>-->
        <!--                            <p>+9865376531</p>-->
        <!--                        </div>-->
        <!--                    </div>-->

        <!--                    <div class="contect-info-content-line">-->
        <!--                        <img src="./header/images/icon-email.png" class="icon" alt="email-icon">-->
        <!--                        <div class="contact-info-icon-text">-->
        <!--                            <h6>Email</h6>-->
        <!--                            <p>Info@example.com</p>-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--                &lt;!&ndash;Contact information end&ndash;&gt;-->
        <!--            </div>-->
        <!--        </div>-->
        <!--copyright-section You Can Remove After Downloading-->
        <div class="footer">
            <div class="footer-text">
                <img src="./header/images/copyright.png" alt="copyright-img" class="images" height="14px"> Willy Wonkas
            </div>
        </div>
        <!--copyright-section-->
    </div>
    <!--contact end-->
</div>

<style>


    .search input {
        width: 100%;
        height: 42px;
        padding-left: 13px;
        border: 2px solid #c5464a;
        border-radius: 19px; /*border-radius 属性用于向元素添加圆角边框：*/
        background: transparent; /*背景透明*/
    }

    .search button {
        height: 42px;
        width: 72px;
        cursor: pointer; /*cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状*/
        /*position: absolute;*/
        background: #c5464a;
        border-radius: 0 19px 19px 0;
        width: 60px;
        right: 0;
    }

    .search button:hover {
        background-color: #c7585c; /*点击搜索按钮时的背景颜色*/
    }

    /* 在<button>元素后面插入内容，并设置所插入内容的样式： */
    .search button:before {
        content: "搜索"; /*插入的内容*/
        font-size: 13px; /*插入内容的字体大小*/
        color: #F9F0DA; /*插入内容的字体颜色*/
    }


    /* 定义旋转动画 */
    @keyframes rotateTwoCircles {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

    /* 为特定类名的 a 元素设置鼠标悬停样式 */
    .special-link:hover {
        font-weight: 900;
        /* 应用旋转动画 */
        animation: rotateTwoCircles 0.5s linear;
    }

    .popup_btn {
        /*margin-left: 35px;*/
        margin-top: 25px;
        display: flex;
        /* 允许子元素换行 */
        flex-wrap: wrap;
        /* 可根据需要设置 div 的宽度 */
        width: 100%;
        /*border: 1px solid #ccc;*/
        /* 设置按钮之间的间距 */
        gap: 13px;
        /*height: 100%;*/
        padding-left: 12px;
        padding-right: 12px;

        /* 水平方向居中 */
        justify-content: center;
        /* 垂直方向单行元素居中 */
        align-items: center;
        /* 垂直方向多行元素居中 */
        align-content: center;

        /* 添加过渡效果，使缩放变化更平滑 */
        transition: transform 0.3s ease;
    }

    .go:hover, .movies:hover, .moviesName:hover {
        /* 鼠标悬停时将 div 放大 1.05 倍，可根据需要调整缩放比例 */
        transform: scale(1.09);
    }

    .popup_btn button {
        /* 设置按钮的宽度和高度，可根据需要调整 */
        width: 100%;
        height: 100%;
        margin: 5px;
    }

    /* 弹出框的按钮 */
    .cancelBtn {
        /* 方法一：使用position属性和bottom、left定位 */
        position: relative;
        bottom: -640px;
        left: 600px;
        color: #778899;
        width: 40%;
        height: 40px;
        cursor: pointer;
        border: solid 1px #cccccc;
        border-radius: 5px;
        margin: 5px 10px;
        color: #ffffff;
        background-color: #337ab7;
    }

    /* 遮罩层 */
    #overlay {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        font-size: 16px;
        background-color: rgba(0, 0, 0, 0.5);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000, endColorstr=#7f000000);
        display: none;
        z-index: 1000; /* 添加较高的z - index值 */
    }

    /* 弹出框主体 */
    .popup {
        background-color: #ffffff;
        max-width: 90%;
        min-width: 70%;
        height: 770px;
        border-radius: 5px;
        margin: 100px auto;
        text-align: center;

    }

    table {
        border-collapse: collapse;
        width: 100%;
    }

    /*table,*/
    th,
    td {
        border: 1px solid #ccc;
    }

    tr:nth-child(even) {
        background-color: #a63434;
    }

    /* 自定义滚动条样式 */
    .custom-scrollable::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    /* 自定义滚动条样式 */
    .scroll-container::-webkit-scrollbar {
        position: absolute;
        width: 10px;
        height: 10px;
        right: 0;
        top: 0;
        z-index: 1;
    }

    .custom-scrollable::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .custom-scrollable::-webkit-scrollbar-thumb {
        background: #888;
    }

    .custom-scrollable::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

    /* 弹出框的标题 */
    .popup_title {
        height: 70px;
        line-height: 60px;
        border-bottom: solid 1px #cccccc;
    }

    /* 弹出框的内容 */
    .popup_content {
        height: 50px;
        line-height: 50px;
        padding: 15px 20px;
    }

    /* 弹出框的按钮栏 */
    .popup_btn {
        padding-bottom: 10px;
    }

    /* 弹出框的按钮 */
    .go {
        /* 分别设置四个角的圆角半径，按顺时针方向：上左、上右、下右、下左 */
        border-radius: 12px;

        padding: 15px 50px;
        /*color: #778899;*/
        /*width: 30%;*/
        /*height: 40px;*/
        /*cursor: pointer;*/
        /*border: solid 1px #cccccc;*/
        /*border-radius: 5px;*/
        /*margin: 5px 10px;*/
        /*color: #ffffff;*/
        /*background-color: #337ab7;*/
    }

    /* 定义标题单元格的基本样式 */
    .title-cell {
        padding: 20px;
        font-size: 18px;
        font-weight: bold;
    }

    /* 定义鼠标悬停时的样式 */
    .title-cell:hover {
        color: #a2a2ff;
    }

    #papersTable {
        width: 100%;
        border-collapse: collapse;
    }

    #papersTable thead {
        color: #b7babc;
        background-color: lightslategrey;
    }

    #papersTable thead th {
        position: sticky;
        top: 0;
        background-color: lightslategrey;
    }

    #papersTable tbody {
        display: block;
        height: 500px; /* 设置滚动区域的高度 */
        overflow-y: auto !important;;
    }

    #papersTable thead,
    #papersTable tbody tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }
</style>
<!--all the divisions-->
<script src="header/js/jquery.min.js"></script>
<script src="header/js/index.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#loadPapersBtn').click(function () {
            $.ajax({
                url: '/literatureSearch',
                method: 'GET',
                dataType: 'json',
                success: function (papers) {
                    var thead = document.getElementById('theadOfliteratureSearch');
                    thead.style.removeProperty('display');


                    var thead = document.getElementById('pageOfSeach');
                    thead.style.removeProperty('display');


                    var thead = document.getElementById('papersTable');
                    thead.border = '1px solid #ccc';

                    var tableBody = $('#papersTable tbody');
                    tableBody.empty();
                    $.each(papers, function (index, paper) {
                        var row = '<tr>' +
                            '<td class="title-cell"  onclick="goToLiterature()">' + paper.title + '</td>' +
                            '<td style="padding:20px;color: #b7babc" >' + paper.authors + '</td>' +
                            '<td style="padding:20px;color: #b7babc" >' + paper.source + '</td>' +
                            '<td style="padding:20px;color: #b7babc" >' + paper.publishTime + '</td>' +
                            '</tr>';
                        tableBody.append(row);
                    });
                },
                error: function () {
                    alert('加载数据失败，请稍后重试。');
                }
            });
        });
    });

    // 生成随机颜色的函数
    function getRandomColor() {
        // 生成0到255之间的随机数作为RGB值
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        // 将RGB值转换为十六进制格式
        return 'rgb(' + r + ',' + g + ',' + b + ')';
    }

    // 获取所有按钮元素
    var buttons = document.querySelectorAll('.popup_btn div');

    // 遍历按钮数组，为每个按钮设置随机颜色
    buttons.forEach(function (button) {
        button.style.backgroundColor = getRandomColor();
    });


    function go(id) {
        var name = $("#name");
        var email = $("#email");
        var subject = $("#subject");
        var body = $("#body");
        console.log(id)


        $.ajax({
            url: '/jgs',
            type: 'POST',
            // dataType: 'json',
            data: {
                name: "2",

            }, success: function (response) {
                // 手动跳转到指定页面
                console.log('我我的娃')
                window.location.href = "/suss";
            }

        });

    }


    function goToMovies(id) {
        // 构建包含 id 参数的 URL
        var url = "/goToMovies?id=" + encodeURIComponent(id);
        // 进行页面跳转
        window.location.href = url;
    }


    function goToLiterature() {
        // 构建包含 id 参数的 URL
        var url = "/goToLiterature?id=1";
        // 进行页面跳转
        window.location.href = url;
    }


    function sendEmail() {
        var name = $("#name");
        var email = $("#email");
        var subject = $("#subject");
        var body = $("#body");
        $('#submit').text("Sending");

        if (isNotEmpty(name) && isNotEmpty(email) && isNotEmpty(subject) && isNotEmpty(body)) {
            $.ajax({
                url: 'sendEmail.php',
                method: 'POST',
                dataType: 'json',
                data: {
                    name: name.val(),
                    email: email.val(),
                    subject: subject.val(),
                    body: body.val()

                }, success: function (response) {
                    // 手动跳转到指定页面
                    window.location.href = "/shiQi/jgs";
                    $('#myForm')[0].reset();
                    $('#submit').text("Thank you!!!");
                }

            });
        }
    }

    function isNotEmpty(caller) {
        if (caller.val() == "") {
            caller.css('border', '1px solid red');
            $('#submit').text("Submit");
            return false;
        } else
            caller.css('border', '');
        return true;
    }


    function showPopup() {
        var overlay = document.getElementById("overlay");
        overlay.style.display = "block";
    }

    function hidePopup() {
        var overlay = document.getElementById("overlay");
        overlay.style.display = "none";
    }

</script>
</body>


</html>